<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站相册筛选系统</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #3b82f6;
            --primary-dark: #2563eb;
            --secondary: #6366f1;
            --light: #f3f4f6;
            --dark: #1f2937;
            --gray: #6b7280;
            --light-gray: #e5e7eb;
            --danger: #ef4444;
            --success: #10b981;
            --transition: all 0.25s ease;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #f9fafb;
            color: var(--dark);
            line-height: 1.6;
            padding: 30px 0;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .page-title {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--primary);
            display: inline-block;
        }
        
        /* 筛选区域样式 */
        .filters-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-bottom: 30px;
        }
        
        .filter-section {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .filter-section:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .filter-content {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }
        
        /* 筛选控件样式 */
        .search-box {
            flex: 1;
            min-width: 250px;
            position: relative;
        }
        
        .search-box input {
            width: 100%;
            padding: 8px 15px 8px 40px;
            border: 1px solid var(--light-gray);
            border-radius: 6px;
            font-size: 0.95rem;
            transition: var(--transition);
        }
        
        .search-box input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .search-box i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
        }
        
        .filter-dropdown .form-select {
            padding: 8px 35px 8px 15px;
            border: 1px solid var(--light-gray);
            border-radius: 6px;
            font-size: 0.95rem;
            transition: var(--transition);
        }
        
        .filter-dropdown .form-select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .tag-filter {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .filter-tag {
            background-color: var(--light);
            border: 1px solid var(--light-gray);
            border-radius: 20px;
            padding: 5px 15px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .filter-tag:hover {
            background-color: var(--light-gray);
        }
        
        .filter-tag.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .date-range {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .date-range input {
            padding: 8px 15px;
            border: 1px solid var(--light-gray);
            border-radius: 6px;
            font-size: 0.95rem;
            transition: var(--transition);
        }
        
        .date-range input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .filter-actions {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            justify-content: flex-end;
        }
        
        .btn-filter {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 8px 20px;
            font-size: 0.95rem;
            transition: var(--transition);
        }
        
        .btn-filter:hover {
            background-color: var(--primary-dark);
        }
        
        .btn-reset {
            background-color: white;
            color: var(--gray);
            border: 1px solid var(--light-gray);
            border-radius: 6px;
            padding: 8px 20px;
            font-size: 0.95rem;
            transition: var(--transition);
        }
        
        .btn-reset:hover {
            background-color: var(--light);
        }
        
        /* 结果统计和视图切换 */
        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .results-count {
            color: var(--gray);
            font-size: 0.95rem;
        }
        
        .view-toggle {
            display: flex;
            gap: 5px;
        }
        
        .view-btn {
            background-color: white;
            border: 1px solid var(--light-gray);
            border-radius: 6px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray);
            transition: var(--transition);
        }
        
        .view-btn:hover {
            background-color: var(--light);
        }
        
        .view-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 相册列表样式 */
        .albums-container {
            margin-bottom: 40px;
        }
        
        .album-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            overflow: hidden;
            transition: var(--transition);
            margin-bottom: 20px;
        }
        
        .album-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        .album-media {
            position: relative;
            overflow: hidden;
        }
        
        .album-single-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .album-card:hover .album-single-image {
            transform: scale(1.05);
        }
        
        .album-multi-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 3px;
            height: 200px;
        }
        
        .album-multi-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .album-no-image {
            height: 200px;
            background-color: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray);
        }
        
        .image-count {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 0.8rem;
            padding: 3px 8px;
            border-radius: 12px;
        }
        
        .album-info {
            padding: 15px;
        }
        
        .album-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .album-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 8px;
        }
        
        .album-tag {
            background-color: var(--light);
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 4px;
            color: var(--gray);
        }
        
        .album-author {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            font-size: 0.9rem;
        }
        
        .author-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            color: var(--dark);
            font-weight: 500;
        }
        
        .album-stats {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* 网格视图样式 */
        .grid-view .row {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }
        
        .grid-view .album-card {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .grid-view .album-info {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        /* 列表视图样式 */
        .list-view .album-card {
            display: flex;
            height: 220px;
        }
        
        .list-view .album-media {
            flex: 0 0 280px;
        }
        
        .list-view .album-single-image,
        .list-view .album-multi-images,
        .list-view .album-no-image {
            height: 100%;
        }
        
        .list-view .album-info {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .list-view .album-stats {
            margin-top: auto;
        }
        
        /* 分页样式 */
        .pagination-container {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }
        
        .pagination {
            display: flex;
            gap: 5px;
        }
        
        .page-item .page-link {
            color: var(--gray);
            border: 1px solid var(--light-gray);
            border-radius: 6px;
            padding: 8px 15px;
            transition: var(--transition);
        }
        
        .page-item .page-link:hover {
            background-color: var(--light);
            color: var(--primary);
            border-color: var(--light-gray);
        }
        
        .page-item.active .page-link {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .filter-content {
                flex-direction: column;
                align-items: stretch;
            }
            
            .list-view .album-card {
                flex-direction: column;
                height: auto;
            }
            
            .list-view .album-media {
                flex: none;
                width: 100%;
            }
            
            .results-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="page-title mx-auto">相册筛选与查询</h1>
        
        <!-- 筛选区域 -->
        <div class="filters-container">
            <!-- 基础搜索和排序 -->
            <div class="filter-section">
                <h3 class="filter-title">
                    <i class="fas fa-search text-primary"></i> 基础搜索
                </h3>
                <div class="filter-content">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索相册名称、描述或作者...">
                    </div>
                    
                    <div class="filter-dropdown">
                        <select class="form-select">
                            <option value="">排序方式</option>
                            <option value="popular">按热门程度</option>
                            <option value="newest">最新发布</option>
                            <option value="oldest">最早发布</option>
                            <option value="views">最多浏览</option>
                            <option value="likes">最多点赞</option>
                        </select>
                    </div>
                    
                    <div class="filter-dropdown">
                        <select class="form-select">
                            <option value="">相册类型</option>
                            <option value="all">全部类型</option>
                            <option value="single">单张图片</option>
                            <option value="multiple">多张图片</option>
                            <option value="empty">无图片</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- 分类和标签筛选 -->
            <div class="filter-section">
                <h3 class="filter-title">
                    <i class="fas fa-tags text-primary"></i> 分类与标签
                </h3>
                <div class="filter-content">
                    <div class="filter-dropdown">
                        <select class="form-select">
                            <option value="">相册分类</option>
                            <option value="nature">自然风光</option>
                            <option value="city">城市建筑</option>
                            <option value="people">人物肖像</option>
                            <option value="food">美食摄影</option>
                            <option value="travel">旅行记录</option>
                            <option value="art">艺术创作</option>
                            <option value="other">其他分类</option>
                        </select>
                    </div>
                    
                    <div class="tag-filter">
                        <div class="filter-tag active">全部标签</div>
                        <div class="filter-tag">#风景</div>
                        <div class="filter-tag">#旅行</div>
                        <div class="filter-tag">#美食</div>
                        <div class="filter-tag">#人像</div>
                        <div class="filter-tag">#建筑</div>
                        <div class="filter-tag">#艺术</div>
                        <div class="filter-tag">+ 更多</div>
                    </div>
                </div>
            </div>
            
            <!-- 时间和互动筛选 -->
            <div class="filter-section">
                <h3 class="filter-title">
                    <i class="fas fa-sliders-h text-primary"></i> 高级筛选
                </h3>
                <div class="filter-content">
                    <div class="date-range">
                        <input type="date" placeholder="开始日期">
                        <span>至</span>
                        <input type="date" placeholder="结束日期">
                    </div>
                    
                    <div class="filter-dropdown">
                        <select class="form-select">
                            <option value="">最低浏览量</option>
                            <option value="100">100+</option>
                            <option value="500">500+</option>
                            <option value="1000">1000+</option>
                            <option value="5000">5000+</option>
                            <option value="10000">10000+</option>
                        </select>
                    </div>
                    
                    <div class="filter-dropdown">
                        <select class="form-select">
                            <option value="">最低点赞数</option>
                            <option value="50">50+</option>
                            <option value="100">100+</option>
                            <option value="500">500+</option>
                            <option value="1000">1000+</option>
                        </select>
                    </div>
                </div>
                
                <div class="filter-actions">
                    <button class="btn-reset">重置筛选</button>
                    <button class="btn-filter">应用筛选</button>
                </div>
            </div>
        </div>
        
        <!-- 结果区域 -->
        <div class="albums-container">
            <div class="results-header">
                <div class="results-count">找到 <strong>24</strong> 个符合条件的相册</div>
                <div class="view-toggle">
                    <button class="view-btn active" data-view="grid" title="网格视图">
                        <i class="fas fa-th"></i>
                    </button>
                    <button class="view-btn" data-view="list" title="列表视图">
                        <i class="fas fa-list"></i>
                    </button>
                </div>
            </div>
            
            <!-- 相册列表 - 网格视图为默认 -->
            <div class="grid-view">
                <div class="row">
                    <!-- 相册1 -->
                    <div class="col">
                        <div class="album-card">
                            <div class="album-media">
                                <div class="album-multi-images">
                                    <img src="https://picsum.photos/id/29/300/300" alt="海滩风景" class="album-multi-image">
                                    <img src="https://picsum.photos/id/30/300/300" alt="日落海景" class="album-multi-image">
                                    <img src="https://picsum.photos/id/31/300/300" alt="海浪照片" class="album-multi-image">
                                    <img src="https://picsum.photos/id/32/300/300" alt="沙滩足迹" class="album-multi-image">
                                </div>
                                <div class="image-count">8 张图片</div>
                            </div>
                            <div class="album-info">
                                <h3 class="album-title">夏日海边度假记录</h3>
                                <div class="album-tags">
                                    <span class="album-tag">#旅行</span>
                                    <span class="album-tag">#海滩</span>
                                </div>
                                <div class="album-author">
                                    <img src="https://picsum.photos/id/64/100/100" alt="陈明的头像" class="author-avatar">
                                    <span class="author-name">陈明</span>
                                </div>
                                <div class="album-stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i> 1.2k
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i> 32
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-heart"></i> 245
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 相册2 -->
                    <div class="col">
                        <div class="album-card">
                            <div class="album-media">
                                <img src="https://picsum.photos/id/65/600/400" alt="城市日落全景" class="album-single-image">
                                <div class="image-count">1 张图片</div>
                            </div>
                            <div class="album-info">
                                <h3 class="album-title">城市日落全景</h3>
                                <div class="album-tags">
                                    <span class="album-tag">#城市</span>
                                    <span class="album-tag">#日落</span>
                                </div>
                                <div class="album-author">
                                    <img src="https://picsum.photos/id/65/100/100" alt="李华的头像" class="author-avatar">
                                    <span class="author-name">李华</span>
                                </div>
                                <div class="album-stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i> 3.5k
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i> 87
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-heart"></i> 562
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 相册3 -->
                    <div class="col">
                        <div class="album-card">
                            <div class="album-media">
                                <div class="album-no-image">
                                    <i class="fas fa-images fa-3x"></i>
                                </div>
                                <div class="image-count">0 张图片</div>
                            </div>
                            <div class="album-info">
                                <h3 class="album-title">我的旅行计划</h3>
                                <div class="album-tags">
                                    <span class="album-tag">#计划</span>
                                    <span class="album-tag">#旅行</span>
                                </div>
                                <div class="album-author">
                                    <img src="https://picsum.photos/id/91/100/100" alt="王芳的头像" class="author-avatar">
                                    <span class="author-name">王芳</span>
                                </div>
                                <div class="album-stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i> 842
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i> 45
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-heart"></i> 128
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 相册4 -->
                    <div class="col">
                        <div class="album-card">
                            <div class="album-media">
                                <div class="album-multi-images">
                                    <img src="https://picsum.photos/id/42/300/300" alt="樱花照片" class="album-multi-image">
                                    <img src="https://picsum.photos/id/43/300/300" alt="郁金香照片" class="album-multi-image">
                                    <img src="https://picsum.photos/id/44/300/300" alt="玫瑰花照片" class="album-multi-image">
                                </div>
                                <div class="image-count">5 张图片</div>
                            </div>
                            <div class="album-info">
                                <h3 class="album-title">春季花卉摄影集</h3>
                                <div class="album-tags">
                                    <span class="album-tag">#自然</span>
                                    <span class="album-tag">#花卉</span>
                                </div>
                                <div class="album-author">
                                    <img src="https://picsum.photos/id/25/100/100" alt="赵伟的头像" class="author-avatar">
                                    <span class="author-name">赵伟</span>
                                </div>
                                <div class="album-stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i> 2.1k
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i> 56
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-heart"></i> 327
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 相册5 -->
                    <div class="col">
                        <div class="album-card">
                            <div class="album-media">
                                <img src="https://picsum.photos/id/26/600/400" alt="山间云海" class="album-single-image">
                                <div class="image-count">1 张图片</div>
                            </div>
                            <div class="album-info">
                                <h3 class="album-title">山间云海奇观</h3>
                                <div class="album-tags">
                                    <span class="album-tag">#自然</span>
                                    <span class="album-tag">#山景</span>
                                </div>
                                <div class="album-author">
                                    <img src="https://picsum.photos/id/64/100/100" alt="陈明的头像" class="author-avatar">
                                    <span class="author-name">陈明</span>
                                </div>
                                <div class="album-stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i> 4.8k
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i> 124
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-heart"></i> 783
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 相册6 -->
                    <div class="col">
                        <div class="album-card">
                            <div class="album-media">
                                <div class="album-multi-images">
                                    <img src="https://picsum.photos/id/54/300/300" alt="食材照片" class="album-multi-image">
                                    <img src="https://picsum.photos/id/55/300/300" alt="成品意大利面" class="album-multi-image">
                                </div>
                                <div class="image-count">3 张图片</div>
                            </div>
                            <div class="album-info">
                                <h3 class="album-title">美食制作记录</h3>
                                <div class="album-tags">
                                    <span class="album-tag">#美食</span>
                                    <span class="album-tag">#烹饪</span>
                                </div>
                                <div class="album-author">
                                    <img src="https://picsum.photos/id/65/100/100" alt="李华的头像" class="author-avatar">
                                    <span class="author-name">李华</span>
                                </div>
                                <div class="album-stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i> 1.5k
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i> 67
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-heart"></i> 219
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 分页 -->
            <div class="pagination-container">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">4</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 视图切换功能
            const viewButtons = document.querySelectorAll('.view-btn');
            const albumsContainer = document.querySelector('.albums-container');
            
            viewButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除所有按钮的active类
                    viewButtons.forEach(btn => btn.classList.remove('active'));
                    // 给当前点击的按钮添加active类
                    this.classList.add('active');
                    
                    // 获取视图类型
                    const viewType = this.getAttribute('data-view');
                    
                    // 切换视图类
                    if (viewType === 'grid') {
                        albumsContainer.classList.remove('list-view');
                        albumsContainer.classList.add('grid-view');
                    } else {
                        albumsContainer.classList.remove('grid-view');
                        albumsContainer.classList.add('list-view');
                    }
                });
            });
            
            // 标签筛选功能
            const filterTags = document.querySelectorAll('.filter-tag');
            filterTags.forEach(tag => {
                tag.addEventListener('click', function() {
                    // 特殊处理"全部标签"和"+ 更多"
                    if (this.textContent === '全部标签') {
                        filterTags.forEach(t => t.classList.remove('active'));
                        this.classList.add('active');
                    } else if (this.textContent !== '+ 更多') {
                        // 移除"全部标签"的active类
                        filterTags[0].classList.remove('active');
                        // 切换当前标签的active类
                        this.classList.toggle('active');
                    } else {
                        // 这里可以实现显示更多标签的逻辑
                        alert('显示更多标签');
                    }
                });
            });
            
            // 筛选按钮功能
            const filterButton = document.querySelector('.btn-filter');
            filterButton.addEventListener('click', function() {
                // 模拟筛选操作
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 筛选中...';
                
                setTimeout(() => {
                    this.innerHTML = '应用筛选';
                    // 这里可以添加实际的筛选逻辑
                    alert('筛选条件已应用');
                }, 800);
            });
            
            // 重置按钮功能
            const resetButton = document.querySelector('.btn-reset');
            resetButton.addEventListener('click', function() {
                // 重置所有筛选条件
                document.querySelectorAll('input[type="text"]').forEach(input => {
                    input.value = '';
                });
                
                document.querySelectorAll('input[type="date"]').forEach(input => {
                    input.value = '';
                });
                
                document.querySelectorAll('.form-select').forEach(select => {
                    select.selectedIndex = 0;
                });
                
                filterTags.forEach((tag, index) => {
                    if (index === 0) {
                        tag.classList.add('active');
                    } else {
                        tag.classList.remove('active');
                    }
                });
            });
        });
    </script>
</body>
</html>
    
